import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Card, Form, Select, Row, Col } from 'antd';
import PropTypes from 'prop-types';
import HighRiskTab from './highRiskTab';
import MediumRiskTab from './mediumRiskTab';
import LowRiskTab from './lowRiskTab';


const mapStateToProps = (state:any) => ({
  batteryMonitorWarningVehicle: state.batteryMonitorWarningVehicle,
  loading: state.loading.models["batteryMonitorWarningVehicle"],
});

class WarningVehicle extends PureComponent<any, any> {
  static contextTypes = {
    permissions: PropTypes.array,
    dicData: PropTypes.any
  };
  constructor(props: any) {
    super(props);
    this.state = {
      activeTabKey: 'highRisk',
    }
  }

  componentDidMount() {}

  onTabChange = (key: any) => {
    this.setState({ activeTabKey: key });
  }

  render() {
    const {
      location: { pathname = '/' },
    } = this.props;
    const { activeTabKey } = this.state;
    const tabList = [
      {
        key: 'highRisk',
        tab: '高风险',
      },
      {
        key: 'mediumRisk',
        tab: '中风险',
      },
      {
        key: 'lowRisk',
        tab: '低风险',
      }
    ];

    const contentList = {
      highRisk: <HighRiskTab permissions={this.context.permissions} pathname={pathname} />,
      mediumRisk: <MediumRiskTab permissions={this.context.permissions} pathname={pathname} />,
      lowRisk: <LowRiskTab permissions={this.context.permissions} pathname={pathname} />,
    }

    return (
      <Card
        size="small"
        bordered={false}
        style={{ backgroundColor: 'rgba(255, 255, 255, 0)' }}
        headStyle={{ backgroundColor: 'rgba(255, 255, 255)' }}
        bodyStyle={{ padding: '1px 0 0 0' }}
        tabList={tabList}
        activeTabKey={activeTabKey}
        onTabChange={this.onTabChange}
      >
        {contentList[activeTabKey]}
      </Card>
    )
  }
}
export default connect(mapStateToProps)(WarningVehicle);
